import React from 'react';
import Modal from './index';
import {Text, View, ScrollView, Button} from 'react-native';

export default class TopModalDemo extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
      visible1: false,
      visible2: false,
    };
  }

  onClose = () => {
    this.setState({
      visible: false,
    });
  }

  onClose1 = () => {
    this.setState({
      visible1: false,
    });
  }

  onClose2 = () => {
    this.setState({
      visible2: false,
    });
  }

  onButtonClick = () => {
    Modal.alert('Title', 'alert content', [
      {text: 'Cancel', onPress: () => console.log('cancel'), style: 'cancel'},
      {text: 'OK', onPress: () => console.log('ok')},
    ]);
  }

  onButtonClick2 = () => {
    Modal.operation([
      {text: '标为未读', onPress: () => console.log('标为未读被点击了')},
      {text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了')},
    ]);
  }

  onButtonClick3 = () => {
    Modal.prompt(
      'Login',
      'Pleas input login information',
      (login, password) =>
        console.log(`login: ${login}, password: ${password}`),
      'login-password',
      null,
      ['Please input name', 'Please input password'],
    );
  }

  onButtonClick4 = () => {
    Modal.prompt(
      'Input password',
      'password message',
      (password) => console.log(`password: ${password}`),
      'secure-text',
      'defaultValue',
    );
  }

  onButtonClick5 = () => {
    Modal.prompt(
      'Name',
      'name message',
      (password) => console.log(`password: ${password}`),
      'default',
      null,
      ['please input name'],
    );
  }

  render() {
    const footerButtons = [
      {text: 'Cancel', onPress: () => console.log('cancel')},
      {text: 'Ok', onPress: () => console.log('ok')},
    ];
    return (
      <ScrollView style={{marginTop: 20}}>
        <Button onPress={() => this.setState({visible: true})} title='showModal'/>
        <Button onPress={() => this.setState({visible1: true})} title='transparent:false'/>
        <Button onPress={() => this.setState({visible2: true})} title='popup'/>

        <Button onPress={this.onButtonClick}  title='Modal.alert'/>
        <Button onPress={this.onButtonClick2} title='Modal.opertation'/>
        <Button onPress={this.onButtonClick5} title='Modal.prompt (default)'/>

        <Button onPress={this.onButtonClick3} title='Modal.prompt (login-password)'/>
        <Button onPress={this.onButtonClick4} title='Modal.prompt (secure-text)'/>

        <Modal
          title="Title"
          transparent
          onClose={this.onClose}
          maskClosable
          visible={this.state.visible}
          closable
          footer={footerButtons}
        >
          <View style={{paddingVertical: 20}}>
            <Text style={{textAlign: 'center'}}>Content...</Text>
            <Text style={{textAlign: 'center'}}>Content...</Text>
          </View>
          <Button onPress={this.onClose} title='close modal'/>
        </Modal>

        <Modal
          transparent={false}
          visible={this.state.visible1}
          animationType="slide-up"
          onClose={this.onClose1}
        >
          <View style={{paddingVertical: 220}}>
            <Text style={{textAlign: 'center'}}>Content...</Text>
            <Text style={{textAlign: 'center'}}>Content...</Text>
          </View>
          <Button onPress={this.onClose1} title='close modal'/>
        </Modal>

        <Modal
          popup
          visible={this.state.visible2}
          animationType="slide-up"
          onClose={this.onClose2}
        >
          <View style={{paddingVertical: 20, paddingHorizontal: 20}}>
            <Text style={{textAlign: 'center'}}>Content...</Text>
            <Text style={{textAlign: 'center'}}>Content...</Text>
          </View>
          <Button onPress={this.onClose2} title='close modal'/>
        </Modal>
      </ScrollView>
    );
  }
}
